<template>
  <div class="rich-text-editor-container">
    <div id="wangeditor"></div>
  </div>
</template>

<script>
import E from "wangeditor";
import { upload } from "@/api/mains";
import { ElLoading } from "element-plus";
import { baseURL } from "@/config";
import { succMsg, failMsg } from "@/utils/MessageUtils";

export default {
  name: "HtmlEditor",
  components: {},
  props: {
    modelValue: {
      type: String,
      default: ""
    },
    bid: {
      type: String,
      default: ""
    },
    btype: {
      type: String,
      default: ""
    },
    bclass: {
      type: String,
      default: ""
    }
  },
  emits: {
    "update:model-value": null
  },
  setup(props, { emit }) {
    const state = reactive({
      editor: null,
      borderColor: "#dcdfe6",
      bid: "",
      btype: "",
      bclass: "",
      content: ""
    });

    state.bid = ref(props.bid);
    state.btype = ref(props.btype);
    state.bclass = ref(props.bclass);
    state.content = ref(props.modelValue);

    onMounted(() => {
      state.editor = new E("#wangeditor");
      // 配置菜单栏，设置不需要的菜单
      state.editor.config.excludeMenus = ["table", "video", "todo", "emoticon"];

      // 如果想完全自己实现图片上传的过程，如上传图片到某个云服务器，可以使用如下代码。
      //https://blog.csdn.net/weixin_39550080/article/details/125740021
      state.editor.config.customUploadImg = async function (resultFiles, insertImgFn) {
        // resultFiles 是 input 中选中的文件列表
        // insertImgFn 是获取图片 url 后，插入到编辑器的方法

        const loading = ElLoading.service({
          lock: true,
          text: "上传中，请稍候...",
          background: "rgba(0, 0, 0, 0.7)"
        });
        const formdata = new FormData();
        resultFiles.forEach(file => {
          formdata.append("files", file);
        });
        formdata.append("bid", state.bid);
        formdata.append("btype", state.btype);
        formdata.append("bclass", state.bclass);

        const responseData = await upload("system/attachment", formdata);
        if (responseData.code == 200) {
          // 上传图片，返回结果，将图片插入到编辑器中
          const filePath = responseData.data[0].filepath;
          if (filePath.indexOf("http") == 0) {
            //如果是url地址直接保存
            insertImgFn(responseData.data[0].filepath);
          } else {
            insertImgFn(`${baseURL}/${responseData.data[0].filepath}`);
          }

          succMsg(responseData.msg);
        } else {
          failMsg(responseData.msg);
        }
        loading.close();
      };

      state.editor.config.onchange = html => {
        // 编辑器里的内容
        state.content = html; // 赋值给自己在data中定义的值
        emit("update:model-value", state.content);
      };

      state.editor.config.uploadImgMaxSize = 2 * 1024 * 1024;
      state.editor.config.height = 290;
      // 限制上传图片格式
      state.editor.config.uploadImgAccept = ["jpg", "jpeg", "png", "gif", "bmp"];
      // 设置编辑器页面层级
      state.editor.config.zIndex = 10;
      // 设置编辑器placeholder
      state.editor.config.placeholder = "请在此编辑内容...";

      state.editor.create();

      setContent(state.content);
    });

    //默认显示说明
    const setContent = content => {
      if (content != null) {
        state.editor.txt.html(content);
      } else {
        //清空
        state.editor.txt.clear();
      }
    };

    const getContent = () => {
      return state.editor.txt.html();
    };

    /*watchEffect(() => {
        if (state.editor != null && state.editor.isFocus) {
          state.editor.config.placeholder = 'aaaa...'
        }
      })*/

    return {
      ...toRefs(state),
      getContent,
      setContent
    };
  }
};
</script>

<style lang="scss" scoped></style>
